<template>
  <div class="app-container">
    <!-- 项目详情 -->
    <div class="projectDetail">
      <h3>项目详情</h3>
      <el-descriptions
        class="margin-top"
        :column="2"
        :size="size"
        border
        :contentStyle="CS"
        :label-style="LS"
      >
        <el-descriptions-item>
          <template slot="label"> 项目名称 </template>
          {{ projectDetail.project_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 关联订单 </template>
          {{ orderName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 项目进度 </template>
          {{ projectDetail.project_progress }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 项目类型 </template>
          {{ projectDetail.project_type }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 项目负责人 </template>
          {{ projectDetail.user_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 项目创建人 </template>
          {{ projectDetail.create_username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 项目内容 </template>
          {{ projectDetail.project_content }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 总工时数量 </template>
          {{ totalWorkNum }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <h3>工时详情</h3>
    <el-table
      v-loading="listLoading"
      :data="workingList"
      border
      fit
      stripe
      highlight-current-row
      style="width: 100%"
      show-summary
      :summary-method="getSummaries"
    >
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="projects_name" label="项目名称" align="center">
      </el-table-column>
      <el-table-column prop="user_nick" label="工时所有者" align="center">
      </el-table-column>
      <el-table-column prop="work_title" label="填报单名称" align="center">
      </el-table-column>
      <el-table-column prop="start_time" label="工时开始日期" align="center">
      </el-table-column>
      <el-table-column prop="end_time" label="工时结束日期" align="center">
      </el-table-column>
      <el-table-column prop="work_amount" label="工时数量" align="center">
      </el-table-column>
      <el-table-column prop="hours_amount" label="工时金额" align="center">
        <template slot-scope="{ row }">
          <span style="margin-right: 12px">{{ row.hours_amount }}</span>
          <el-button
            v-if="row.hours_amount === 0"
            type="text"
            size="small"
            @click="handleSetWorkAmount(row)"
            >获取金额</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.created_at | formate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.updated_at | formate }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { curentTime } from "@/filters/index";
import { getProjById } from "@/api/project";
import { setWorkAmount } from "@/api/workingHours";
export default {
  name: "Details",
  filters: {
    formate(date) {
      return curentTime(date);
    },
  },
  data() {
    return {
      size: "",
      // 加载
      listLoading: true,
      // 项目id
      projectId: "",
      // 项目信息
      projectDetail: {},
      // 订单信息
      orderName: "",
      // 工时记录
      workingList: [],
      totalWorkNum: 0,

      CS: {
        "min-width": "600px", //最小宽度
        "word-break": "break-all", //过长时自动换行
      },
      LS: {
        color: "#000",
        "font-weight": "600",
        "min-width": "110px",
        "word-break": "keep-all",
      },
    };
  },
  mounted() {
    this.projectId = this.$route.query.id;
    this.getProjDetails();
  },
  methods: {
    // 获取项目详细信息
    getProjDetails() {
      getProjById({ id: this.projectId }).then((res) => {
        // this.orderList = res.data.orderList
        res.data.orderList.forEach((item) => {
          // this.orderName += item.order_name + ",";
          this.orderName = item.order_name;
        });
        this.projectDetail = res.data.project;
        this.workingList = res.data.workingList;
        this.listLoading = false;
        this.totalWorkNum = 0;
        this.workingList.forEach((el) => {
          this.totalWorkNum += parseFloat(el.work_amount);
        });
      });
    },
    //表格合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index == 0) {
          sums[index] = "总计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (column.property === "work_amount") {
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = "";
          }
        }
      });
      return sums;
    },
    //  为工时添加金额
    async handleSetWorkAmount(row) {
      let res = await setWorkAmount({
        id: row.id,
        union_id: row.union_id,
      });
      if (res && res.success) {
        this.getProjDetails();
        this.$message({
          message: "获取成功",
          type: "success",
        });
      } else {
        this.$message({
          message: res.msg || "获取失败",
          type: "fail",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.projectDetail {
  margin-bottom: 20px;
}
</style>